<template>
	<div class="loginForm">
		<el-form :rules="rules" :model="userForm" ref="userForm">
			<el-form-item label="登录名称" prop="username">
				<el-input v-model="userForm.username"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input type="password" v-model="userForm.password"></el-input>
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="login('userForm')">登录</el-button>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				userForm:{
					username:'admin',
					password:'admin'
				},
				rules:{
					username:[
						 { required: true, message: '请输入用户名称', trigger: 'blur' }
					],
					password:[
						{ required: true, message: '请输入登录密码', trigger: 'blur' },
						{ min:3,max:16,message:"密码要求在3到16之间" }
					]
				}
			}
		},
		methods:{
			login(userForm){
				this.$refs[userForm].validate((valid) => {
				  if (valid) {
					this.axios.post(this.$baseUrl+"user/login",this.userForm).then(res=>{
						console.log(res);
						if(res.data.result){
							localStorage.setItem("username",res.data.data.username);
							//保存tonken信息
							localStorage.setItem("token",res.data.data.token);
							//vuex保存登录用户的信息
							this.$store.commit('setUserInfo',res.data.data);
							this.$router.push("/index");
						}else{
							this.$message({
								message: res.data.msg,
								type:"warning"
							});
						}
					})
					
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			}
			
		}
	}
</script>

<style scoped>
	.loginForm {
		width: 25%;
		margin-left: 33%;
		margin-top: 10%;
	}
</style>